<template>
  <div class="editeInfo">
    <hmheader title="个人信息编辑">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
      <template #right>
        <van-icon name="wap-home-o" />
      </template>
    </hmheader>
    <div class="userImg">
      <img :src="userInfo.head_img" alt="" />
      <van-uploader :after-read="afterRead" />
    </div>
    <hmcell @click.native="changenickname">
      <template #title> 呢称 </template>
      <template #desc>
        {{ userInfo.nickname }}
      </template>
    </hmcell>
    <van-dialog
      v-model="show"
      title="编辑昵称"
      show-cancel-button
      @confirm="updataNickName"
    >
      <van-field
        v-model.trim="nickname"
        label="昵称"
        placeholder="请输入昵称"
      />
    </van-dialog>
    <hmcell @click.native="updataPassword">
      <template #title> 密码 </template>
      <template #desc>******* </template>
    </hmcell>
    <van-dialog
      v-model="passwordShow"
      title="编辑密码"
      show-cancel-button
      @confirm="updataPW"
    >
      <van-field
        v-model.trim="oldPassword"
        label="原密码"
        placeholder="请输入原密码"
      />

      <van-field
        v-model.trim="newPassword"
        label="新密码"
        placeholder="请输入原密码"
      />
    </van-dialog>
    <hmcell @click.native="gendershow = !gendershow">
      <template #title> 性别 </template>
      <template #desc> {{ userInfo.gender == 1 ? "男" : "女" }} </template>
    </hmcell>
    <van-dialog
      v-model="gendershow"
      title="编辑密码"
      show-cancel-button
      @confirm="updataSex"
    >
      <van-field
        v-model.trim="gender"
        label="编辑性别"
        placeholder="请输入性别"
      />
    </van-dialog>
  </div>
</template>

<script>
import hmheader from "../components/hmheader.vue";
import hmcell from "../components/hmcell.vue";
import { getUserInfo, getEditePeoper } from "../apis/user.js";
import axios from "../utils/myaxios.js";
import { postFileUpload } from "../apis/fileUpload.js";
export default {
  components: {
    hmheader,
    hmcell,
  },
  data() {
    return {
      userInfo: {},
      show: false,
      nickname: "",
      oldPassword: "",
      newPassword: "",
      passwordShow: false,
      gendershow: false,
      gender: "男",
    };
  },
  mounted() {
    getUserInfo(this.$route.params.id)
      .then((res) => {
        // console.log(res);
        this.userInfo = res.data.data;
        this.userInfo.nickname = this.userInfo.nickname || "奋斗吧少年";
        if (res.data.message == "获取成功") {
          // console.log(res.data.data);
          if (res.data.data.head_img) {
            this.userInfo.head_img =
              axios.defaults.baseURL + this.userInfo.head_img;
          } else {
            this.userInfo.head_img = `http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg`;
          }
        }
        // console.log(this.userInfo.head_img);
      })

      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    updataSex() {
      if (this.gender == "男" || this.gender == "女") {
        getEditePeoper(this.userInfo.id, {
          gender: this.gender == "男" ? 1 : 0,
        })
          .then((res) => {
            console.log(res);
            if (res.data.message == "修改成功") {
              this.$toast.success("修改成功");
              // this.userInfo.nickname = res.data.data.nickname;

              this.userInfo.gender = res.data.data.gender;
            }
          })
          .catch((err) => console.log(err));
      } else {
        this.$toast.fail("请正确输入性别");
      }
    },
    updataPassword() {
      console.log(123);
      // this.show = true;
      this.passwordShow = !this.passwordShow;
      console.log();
    },
    updataPW() {
      if (this.oldPassword == this.userInfo.password) {
        if (/^.{3,16}$/.test(this.newPassword)) {
          getEditePeoper(this.userInfo.id, {
            password: this.newPassword,
          })
            .then((res) => {
              console.log(res);
              if (res.data.message == "修改成功") {
                this.$toast.success("修改成功");
                this.userInfo.nickname = res.data.data.nickname;
              }
            })
            .catch((err) => console.log(err));
        } else {
          this.$toast.fail("新密码输入不合法");
        }
      } else {
        this.$toast.fail("原密码输入不正确");
      }
    },
    updataNickName() {
      getEditePeoper(this.userInfo.id, {
        nickname: this.nickname,
      })
        .then((res) => {
          // console.log(res);
          if (res.data.message == "修改成功") {
            this.$toast.success("修改成功");
            this.userInfo.nickname = res.data.data.nickname;
          }
        })
        .catch((err) => console.log(err));
    },
    changenickname() {
      // console.log(123);
      // this.show = true;
      this.show = !this.show;
      this.nickname = this.userInfo.nickname;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      let formdata = new FormData();
      formdata.append("file", file.file);
      postFileUpload(formdata)
        .then((res) => {
          // console.log(res);
          // console.log(axios.defaults.baseURL);
          this.userInfo.head_img = axios.defaults.baseURL + res.data.data.url;
          // console.log(this.userInfo.head_img);
          getEditePeoper(this.userInfo.id, { head_img: res.data.data.url })
            .then((res) => {
              // console.log(res);
              if (res.data.message == "修改成功") {
                this.$toast.success("修改成功");
              }
            })
            .catch((err) => console.log(err));
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>
<style lang='less' scoped>
.editeInfo {
  .userImg {
    position: relative;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    background-color: antiquewhite;
    > img {
      width: 100px;
      height: 100px;
    }
    /deep/ .van-uploader {
      position: absolute;
      opacity: 0;
      .van-uploader__upload {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
